<template>
	<view class="page" :style="[grayScaleStyle]">
		<view class="head">
			<view class="head1">
				<text class="iconfont icon-fenxiang1" @click="goBack"></text>
				<text class="nav-title">积分比列</text>

			</view>
		</view>
		<view class="nullview"></view>
			<view class="title">积分比例</view>
		<view class=" ratio-card">
			<view class="progress-section">
				<!-- 中间显示的百分比 -->
				<view class="percent-label" :style="{ left: greenRatio + '%' }">{{greenRatio}}%</view>

				<!-- 自定义进度条 -->
				<view class="progress-bar" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
					<view class="progress-green" :style="{ width: greenRatio + '%' }"></view>
					<view class="divider" :style="{ left: greenRatio + '%' }"></view>
					<view class="progress-orange" :style="{ width: orangeRatio + '%' }"></view>
				</view>

				<!-- 底部比例说明 -->
				<view class="ratio-labels">
					<view >积分占比：<text class="left-ratio">{{greenRatio}}%</text> </view>
					<view >现金占比：<text class="right-ratio">{{orangeRatio}}%</text> </view>
				</view>
			</view>

			<!-- 说明文本 -->
			<view class="description"> 
				*当前店铺积分比例：<text class="left-ratio">{{greenRatio}}%</text>积分+现金：<text  class="right-ratio">{{orangeRatio}}%</text>
			</view>
			<view class="notice">
				每月仅支持该一次，请认真对
			</view>

			
		</view>
			<view class="submit-btn">
				<view class="btn" @click="handleSubmit">提交</view>
			</view>
	</view>
</template>

<script>
	import grayScaleMixin from '../../moduleA/mixins/grayScale.js'
	export default {
  mixins: [grayScaleMixin],
		data() {
			return {

				greenRatio: 10,
				orangeRatio: 90,
				isDragging: false,
				progressBarWidth: 0,
				progressBarLeft: 0

			}
		},
		mounted() {
			// 获取进度条元素的位置和宽度信息
			const query = uni.createSelectorQuery().in(this);
			query.select('.progress-bar').boundingClientRect(data => {
				this.progressBarWidth = data.width;
				this.progressBarLeft = data.left;
			}).exec();
		},

		methods: {
			goBack() {
				uni.navigateBack(-1)
			},
			handleSubmit() {
				// 处理提交逻辑
				uni.setStorageSync('_greenRatio',this.greenRatio);
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})
			},
			touchStart(e) {
				this.isDragging = true;
			},
			touchMove(e) {
				if (!this.isDragging) return;

				const touch = e.touches[0];
				const x = touch.clientX - this.progressBarLeft;
				let ratio = Math.round((x / this.progressBarWidth) * 100);

				// 限制比例范围在0-100之间
				ratio = Math.max(0, Math.min(100, ratio));

				// 设置最小间隔为5%
				ratio = Math.round(ratio / 1) *1;

				this.greenRatio = ratio;
				this.orangeRatio = 100 - ratio;
			},
			touchEnd() {
				this.isDragging = false;
			}

		}
	}
</script>


<style scoped lang="scss">
	@import "integral.scss";
	.page{
		min-height: 100vh;
		background: linear-gradient(180deg,#ffffff, #f3f3f3);
		padding-bottom: 0;
	}
	.progress-section {
		position: relative;
		padding: 20rpx 0;

		.percent-label {
			position: absolute;
			top: -50rpx;
			transform: translateX(-50%);
			color: #43d534;
			font-size: 28rpx;
			padding: 14rpx 28rpx;
			border-radius: 12rpx;
			background: #ffffff;
			box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16); 
		}

		.progress-bar {
			height: 16rpx;
			background-color: #f5f5f5;
			border-radius: 8rpx;
			display: flex;
			overflow: hidden;
			position: relative;

			.progress-green {
				background-color: #4cd964;
				height: 100%;
				transition: width 0.1s ease;
			}

			.divider {
				width: 6rpx;
				background-color: #fff;
				position: absolute;
				height: 100%;
				cursor: pointer;
				transform: translateX(-50%);
				box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.2);

				&::after {
					content: '';
					position: absolute;
					width: 30rpx;
					height: 30rpx;
					background-color: #fff;
					border-radius: 50%;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.2);
				}
			}

			.progress-orange {
				background-color: #ff9500;
				height: 100%;
				transition: width 0.1s ease;
			}
		}

		.ratio-labels {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #b5b5b5;
			
			
		}
	}
			.left-ratio {
				color: #43D534;
				font-weight: bold;
			}
			.right-ratio {
				color: #F89E63;
				font-weight: bold;
			}
	.description {
		margin-top: 0rpx;
		font-size: 18rpx;
		color: #b5b5b5;
	}

	.notice {
		margin-top: 16rpx;
		font-size: 18rpx;
		color: #b5b5b5;
	}

	.submit-btn {
		padding: 0 40rpx;
		position: fixed;
		left: 0;
		bottom: 5vh;
		width: 100%;
		.btn {
			width: 280rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			background: #43d534;
			border-radius: 15px;
			color: #fff;
			font-size: 28rpx;
			margin: 0 auto;
			&::after {
				border: none;
			}
		}
	}
	.nullview{
		width: 100%;
		height: 200rpx;
	}
	.title {
		color: #000000;
		font-size: 32rpx;
		font-weight: bold;
		width: 94%;
		margin: 20rpx auto;
	}
	.ratio-card {
		width: 94%;
		margin: 0 auto;
		margin-top:30rpx;
		padding: 70rpx 20rpx 20rpx 20rpx;
		padding-top: 70rpx;
		background-color: #fff;
		border-radius: 20rpx;
		border-radius: 6px;
		box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16); 
		// padding: 30rpx;
		// margin-bottom: 40rpx;

		
	}
</style>